<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Home</title>
		<!-- load stylesheets -->
		<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
		<!-- Font awesome -->
		<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
		<!-- Bootstrap style -->
		<link rel="stylesheet" href="stylesheets/hero-slider-style.css">
		<!-- Hero slider style (https://codyhouse.co/gem/hero-slider/) -->
		<link rel="stylesheet" href="stylesheets/magnific-popup.css">
		<!-- Magnific popup style (http://dimsemenov.com/plugins/magnific-popup/) -->
		<link rel="stylesheet" href="stylesheets/templatemo-style.css">
		<!-- Templatemo style -->
		<link rel="stylesheet" type="text/css" href="stylesheets/animate.css" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
		<style type="text/css">
			.tm-text span {
				display: inline-block;
				width: 250px;
			}
			
			.canvas {
				margin: 0 22px;
				width: 120px;
				height: 150px;
				float: left;
				text-align: center;
				position: relative;
			}
			
			.canvas div {
				color: #B06D0F;
			}
			
			.canvas span {
				display: inline-block;
				width: 20px;
				height: 120px;
				line-height: 120px;
				position: absolute;
				left: 50%;
				top: 0;
				margin-left: -15px;
				color: hotpink;
			}
			
			.img-fluid.tm-img {
				height: 400px;
				margin-bottom: 20px;
			}
			
			.img-fluid.tm-img:hover {
				animation: move 0.5s;
				animation-fill-mode: forwards;
			}
			
			@keyframes move {
				from {
					border: 10px solid white;
					transform: scale(1);
				}
				to {
					border: 10px solid greenyellow;
					transform: scale(1.1);
				}
			}
			
		</style>
	</head>

	<body>

		<!-- Content -->
		<div class="cd-hero">
			<!-- Navigation -->
			<div class="cd-slider-nav">
				<nav class="navbar">
					<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
				&#9776;
			</button>
					<div class="collapse navbar-toggleable-sm text-xs-center text-uppercase tm-navbar" id="tmNavbar">
						<ul class="nav navbar-nav">
							<li class="nav-item active selected">
								<a class="nav-link" href="#0" data-no="1">ABOUT ME <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#0" data-no="2">SKILLS</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#0" data-no="3">EXPERIENCE</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#0" data-no="4">DEMO</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#0" data-no="5">LIFE</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>

			<ul class="cd-hero-slider">
				<!-- autoplay -->
				<!--Page1-->
				<li class="selected">
					<div class="cd-full-width">
						<div class="container-fluid js-tm-page-content tm-page-1" data-page-no="1">
							<div class="row">
								<div class="col-xs-12">
									<i class="fa fa-4x fa-camera tm-icon"></i>
									<h2 class="tm-site-name">INTRO</h2>
									<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-textbox-1-col">
										<p class="tm-text"><span>姓名：张炎</span><span>性别：男</span></p>
										<p class="tm-text"><span>毕业学院：蚌埠学院</span><span>学历：本科</span></p>
										<p class="tm-text"><span>工作经验：二年</span><span>职位：前端工程师</span></p>
										<p class="tm-text"><span>联系电话：17682302207</span><span>E–mail：874916630@qq.com</span></p>
									</div>
								</div>
							</div>

						</div>
					</div>
					<!-- .cd-full-width -->
				</li>
				<!--Page 2-->
				<li>
					<div class="cd-full-width">
						<div class="container-fluid js-tm-page-content" data-page-no="2">
							<div class="row">
								<div class="col-xs-12">
									<div class="tm-col-container">
										<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox">
											<h2 class="tm-text-title">MY SKILLS</h2>
											<p class="tm-text">
												<div class="canvas">
													<canvas id="html" width="120px" height="120px"></canvas>
													<div>HTML5</div>
													<span>95%</span>
												</div>
												<div class="canvas">
													<canvas id="css" width="120px" height="120px"></canvas>
													<div>CSS3</div>
													<span>90%</span>
												</div>
												<div class="canvas">
													<canvas id="jquery" width="120px" height="120px"></canvas>
													<div>JQuery</div>
													<span>90%</span>
												</div>
												<div class="canvas">
													<canvas id="swiper" width="120px" height="120px"></canvas>
													<div>Swiper/IScroll</div>
													<span>85%</span>
												</div>
												<div class="canvas">
													<canvas id="bootstrap" width="120px" height="120px"></canvas>
													<div>Bootstrap</div>
													<span>80%</span>
												</div>
												<div class="canvas">
													<canvas id="vue" width="120px" height="120px"></canvas>
													<div>Vue</div>
													<span>90%</span>
												</div>
												<div class="canvas">
													<canvas id="element" width="120px" height="120px"></canvas>
													<div>Element</div>
													<span>75%</span>
												</div>
												<div class="canvas">
													<canvas id="svn" width="120px" height="120px"></canvas>
													<div>Svn</div>
													<span>90%</span>
												</div>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<!-- .cd-full-width -->

				</li>

				<!-- Page 3 -->
				<li>
					<div class="cd-full-width">
						<div class="container-fluid js-tm-page-content" data-page-no="3">
							<div class="row">
								<div class="col-xs-12">
									<i class="fa fa-4x fa-camera tm-icon"></i>
									<h2 class="tm-site-name"></h2>
									<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-textbox-1-col">
										<p class="tm-text">2015.07 - 2016.9</p>
										<p class="tm-text">就职于南京新视云网络科技有限公司</p>
										<p class="tm-text">职位：前端工程师</p>
										<p class="tm-text">收获：提升不同部门之间的交流合作能力，同时也提升了不少工作抗压能力，也学习到了很多关于前端的知识。</p>
									</div><div class="tm-bg-white-translucent text-xs-left tm-textbox tm-textbox-1-col">
										<p class="tm-text">2016.10 - 至今</p>
										<p class="tm-text">就职于杭州海象网络科技有限公司</p>
										<p class="tm-text">职位：前端工程师</p>
										<p class="tm-text">收获：学习了很多新的技能,Vue+Vuex+Vue-route+Vue-resource+Vue-form+Vue-scroller</p>
									</div>
								</div>

							</div>
						</div>

					</div>

				</li>
				<!--Page 4-->
				<li>
					<!-- class="cd-bg-video" -->
					<div class="cd-full-width">

						<div class="container-fluid js-tm-page-content" data-page-no="3">

							<div class="row tm-img-gallery">
								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
									<a href="images/nineMall.png">
										<img src="images/nineMall.png" alt="Image" class="img-fluid tm-img">
									</a>
								</div>
								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
									<a href="images/nine_list.png">
										<img src="images/nine_list.png" alt="Image" class="img-fluid tm-img">
									</a>
								</div>
								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
									<a href="images/nine_goods.png">
										<img src="images/nine_goods.png" alt="Image" class="img-fluid tm-img">
									</a>
								</div>
								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
									<a href="images/nine_home.png">
										<img src="images/nine_home.png" alt="Image" class="img-fluid tm-img">
									</a>
								</div>
								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
									<a href="images/nine_search.png">
										<img src="images/nine_search.png" alt="Image" class="img-fluid tm-img">
									</a>
								</div>
								<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
									<a href="images/nine_zhuce.png">
										<img src="images/nine_zhuce.png" alt="Image" class="img-fluid tm-img">
									</a>
								</div>
							</div>

						</div>

					</div>

				</li>
				<!--Page 5-->
				<li>
					<div class="cd-full-width">
						
					</div>
					<!-- .cd-full-width -->
				</li>
			</ul>
			<!-- .cd-hero-slider -->

			<footer class="tm-footer">

				<p class="tm-copyright-text">Copyright &copy; By ZY</p>

			</footer>

		</div>
		<!-- .cd-hero -->

		<!-- <div id="loader-wrapper">
	<div id="loader"></div>
	<div class="loader-section section-left"></div>
	<div class="loader-section section-right"></div>
</div> -->

		<!-- load JS files -->
		<script src="javascripts/jquery-1.11.3.min.js"></script>
		<!-- jQuery (https://jquery.com/download/) -->
		<script src="javascripts/tether.min.js"></script>
		<!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
		<script src="javascripts/bootstrap.min.js"></script>
		<!-- Bootstrap js (v4-alpha.getbootstrap.com/) -->
		<script src="javascripts/hero-slider-main.js"></script>
		<!-- Hero slider (https://codyhouse.co/gem/hero-slider/) -->
		<script src="javascripts/jquery.magnific-popup.min.js"></script>
		<!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->

		<script>
			function adjustHeightOfPage(pageNo) {

				// Get the page height
				var totalPageHeight = 15 + $('.cd-slider-nav').height() +
					$(".cd-hero-slider li:nth-of-type(" + pageNo + ") .js-tm-page-content").height() + 160 +
					$('.tm-footer').height();

				// Adjust layout based on page height and window height
				if(totalPageHeight > $(window).height()) {
					$('.cd-hero-slider').addClass('small-screen');
					$('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", totalPageHeight + "px");
				} else {
					$('.cd-hero-slider').removeClass('small-screen');
					$('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", "100%");
				}

			}

			/*
				Everything is loaded including images.
			*/
			$(window).load(function() {

				adjustHeightOfPage(1); // Adjust page height

				/* Gallery pop up
				-----------------------------------------*/
				$('.tm-img-gallery').magnificPopup({
					delegate: 'a', // child items selector, by clicking on it popup will open
					type: 'image',
					gallery: {
						enabled: true
					}
				});

				/* Collapse menu after click 
				-----------------------------------------*/
				$('#tmNavbar a').click(function() {
					$('#tmNavbar').collapse('hide');

					adjustHeightOfPage($(this).data("no")); // Adjust page height       
				});

				/* Browser resized 
				-----------------------------------------*/
				$(window).resize(function() {
					var currentPageNo = $(".cd-hero-slider li.selected .js-tm-page-content").data("page-no");
					adjustHeightOfPage(currentPageNo);
				});

				// Remove preloader
				// https://ihatetomatoes.net/create-custom-preloading-screen/
				$('body').addClass('loaded');

			});
		</script>

	</body>

</html>